<template>
  <div>
    <div class="upload">
      <el-button type="primary" @click="changeFile">上传</el-button>
    </div>
    <div>
      <el-table :data="tableList">
        <!-- <el-table-column :prop="data" label="上传日期" show-overflow-tooltip></el-table-column> -->
        <el-table-column prop="name" label="文件名称" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column :prop="data" label="能力名称" show-overflow-tooltip></el-table-column>
        <el-table-column :prop="data" label="上传单位" show-overflow-tooltip></el-table-column>-->
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button @click="reClick" type="text" size="small">重新上传</el-button>
            <el-button @click="delectClick(scope)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <input style="display: none" type="file" @change="uploadFile" ref="file" />
  </div>
</template>

<script >
import wjfwService from '@/api/wjfw'
import jkglService from '@/api/jkgl'
export default {
  data() {
    return {
      form: {
        wjbh: '',
      },
      tableList: []
    }
  },
  methods: {
    // 点击上传按钮
    changeFile() {
      this.$refs.file.multiple = false
      // this.$refs.file.accept = '.png,.jpg'
      this.$refs.file.click()
    },
    uploadFile(e) {
      const file = e.target.files[0]
      this.tableList = [file];
      const formData = new FormData()
      formData.append('file', file)
      formData.append('wjmc', file.name)
      wjfwService
        .upload(formData)
        .then(res => {
          this.$refs.file.value = ''
          this.form.wjbh = res.wjbh
          this.$emit('getJkwd', this.form.wjbh)
          this.$message.success('上传成功');
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },
    validateForm() {
      return new Promise((resolve, reject) => {
        resolve()
      })
    },
    // 点击删除
    delectClick(row) {
      this.tableList = [];
    },
    // 点击重新上传
    reClick() {
      this.$refs.file.multiple = false
      // this.$refs.file.accept = '.png,.jpg'
      this.$refs.file.click()
    }
  }

}


</script>

<style lang="scss" scoped>
.upload {
  width: 100%;
  margin: 10px 0;
  text-align: right;
}
</style>